<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<!--

  Created using /
  Source can be edited via /untitled/edit

-->
    <head>
        <title>Slide Out Navigation With Apple Icon Style | Free Download All Kinds Of Software And Free Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Slide Out Navigation With Apple Icon Style" />
        <meta name="keywords" content="jquery, css, apple-style, apple, apple-like, beautiful, fancy, tutorial, menu, navigation, icons"/>
        <link rel="stylesheet" href="http://www.tympanus.net/Tutorials/FancyAppleStyleNavigation/css/style.css" type="text/css" charset="utf-8"/>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7243260-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

    </head>
    <style>
        body{
            margin:0px;
            padding:0px;
            background-color:#ff6633;
            font-family:Arial;
        }
        .title{
            position:absolute;
            top:100px;
            left:50%;
            margin-left:-204px;
            width:409px;
            height:348px;
            background:transparent url(http://4.bp.blogspot.com/-C_iEQ8uT7VI/T96rGDOOTAI/AAAAAAAADJg/xQcNEa0kXKA/s1600/title.gif) no-repeat top left;
        }
        .info{
            position:fixed;
            bottom:0px;
            left:0px;
        }
        .back{
            display:block;
            background:transparent url(http://2.bp.blogspot.com/-eYYv4PDn-tk/T96rXYp5BfI/AAAAAAAADJo/eZ_ARBRKxFo/s1600/back.gif) no-repeat top left;
            width:281px;
            height:143px;
        }
        a.dry{
            position:absolute;
            bottom:10px;
            right:10px;
            color:#000;
            font-weight:bold;
            font-size:16px;

        }
    </style>
    <body>
        <div class="title"></div>
        <div class="navigation">
            <ul class="menu" id="menu">
                <li><span class="ipod"></span><a href="" class="first">Players</a></li>
                <li><span class="video_camera"></span><a href="">Cameras</a></li>

                <li><span class="television"></span><a href="">TVs</a></li>
                <li><span class="monitor"></span><a href="http://otowebsite.blogspot.com">Screens</a></li>
                <li><span class="toolbox"></span><a href="">Tools</a></li>
                <li><span class="telephone"></span><a href="">Phones</a></li>
                <li><span class="print"></span><a href="" class="last">Printers</a></li>
            </ul>

        </div>
        <div class="info">
            <a class="back" href="http://otowebsite.blogspot.com/2012/06/slide-out-navigatiaon-with-apple-icon.html"></a>
        </div>
        <a class="dry" href="http://www.twitter.com/otowebsite">@otowebsite</a>

        <script type="text/javascript" src="http://filiex.googlecode.com/files/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menu span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
                }
            );
            });
        </script>
    <script>
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}

</script>
</body>
</html>​